<script>
import { reactive, ref, toRefs,onActivated } from '@vue/runtime-core'
import {useRoute,useRouter} from "vue-router"
import { getJsonshopSearch } from "../api/shopSearch.js";
import { getJsonseafood } from "../api/seafood.js";
import { getJsonfruits } from "../api/fruits.js";
    export default {
        setup() {
            let route=useRoute()
            let router=useRouter()
            let dataFun=reactive({
                title:"",
                back:"",
                id:0,
                out:true,
                check:1,
                sort:false,
            })

            let getScroll=()=>{
                let shopsearch=document.getElementById("shopsearchlist")
                localStorage.setItem("shopsearchTop",JSON.stringify(shopsearch.scrollTop))
            }

            onActivated(()=>{
                console.log("aaa");
                dataFun.check=1
                if(dataFun.id!=route.query.id || dataFun.title!=route.query.title){
                    dataFun.id=route.query.id
                    dataFun.title=route.query.title
                    dataFun.back=route.query.back
                    getlistFun()
                }

                console.log("我被激活");
                console.log("shopviewTop=>", JSON.parse(localStorage.shopsearchTop || 0));
                let shopsearch=document.getElementById("shopsearchlist")
                shopsearch.scrollTop = JSON.parse(localStorage.shopsearchTop || 0)

            })

            let shopList =ref([]);//商品列表
            let list =ref([]);//商品列表

            // 筛选列表数据
            let getlistFun=()=>{
                if(dataFun.id==0){
                    getJsonshopSearch().then(data=>{
                        list.value=data.data.filter(item=>{
                            return item.title.indexOf(dataFun.title) !=-1
                        })
                        shopList.value=JSON.parse(JSON.stringify(list.value))
                        console.log(shopList.value);
                        console.log(shopList.value.length);
                        if(shopList.value.length==0){
                            dataFun.out=false
                        }else{
                            dataFun.out=true
                        }
                    })
                }else if(dataFun.id==1){
                    getJsonfruits().then(data=>{
                        list.value=data.data
                        shopList.value=JSON.parse(JSON.stringify(list.value))
                    })
                }else if(dataFun.id==2){
                    getJsonseafood().then(data=>{
                        list.value=data.data
                        shopList.value=JSON.parse(JSON.stringify(list.value))
                    })
                }
                
                
                
            }

            // 接受路由参数
            function getroute(){
                // dataFun.title=route.query.title
                // dataFun.back=route.query.back
                // dataFun.id=route.query.id
                console.log(dataFun.title);
                console.log(dataFun.back);
            }

            // 进入商品详情页
            let goods=(shopid)=>{

                router.push({
                   path:"/shopDetail",
                   query:{
                        shopid
                    }
                })
            }

            // 综合
            let comprehensive=()=>{
                dataFun.check=1
                shopList.value=JSON.parse(JSON.stringify(list.value))
                console.log(shopList.value);
                console.log(list.value);
            }

            // 销量
            let salesvolume=()=>{
                dataFun.check=2
                let temp=0;
                for(let i =0;i<shopList.value.length;i++){
                    for(let j=i+1;j>0;j--){
                        if(shopList.value[j].sale>shopList.value[j-1].sale){
                            temp = shopList.value[j];
                            shopList.value[j]= shopList.value[j-1];
                            shopList.value[j-1] = temp;
                        }
                    }
                }
            }

            // 价格
            let price=()=>{
                dataFun.check=3
                dataFun.sort=!dataFun.sort
                if(dataFun.sort){

                    let temp=0;
                    for(let i =0;i<shopList.value.length;i++){
                        for(let j=i+1;j>0;j--){
                            if(shopList.value[j].newprice*1<shopList.value[j-1].newprice*1){
                                temp = shopList.value[j];
                                shopList.value[j]= shopList.value[j-1];
                                shopList.value[j-1] = temp;
                            }
                        }
                    }
                }else{
                    let temp=0;
                    for(let i =0;i<shopList.value.length;i++){
                        for(let j=i+1;j>0;j--){
                            if(shopList.value[j].newprice*1>shopList.value[j-1].newprice*1){
                                temp = shopList.value[j];
                                shopList.value[j]= shopList.value[j-1];
                                shopList.value[j-1] = temp;
                            }
                        }
                    }
                }
            }

            // 新品
            let newshop=()=>{
                dataFun.check=4
                shopList.value=list.value.filter(item=>{
                    return item.new==true
                })
            }

            // onActivated()
            getroute()
            // getlistFun()
            return {
                ...toRefs(dataFun),
                shopList,
                goods,
                comprehensive,
                salesvolume,
                price,
                newshop,
                list,
                getScroll
            }
        },
    }
</script>

<template>
<!-- @scroll="getScroll($event)" -->
    <div class="shopSearchList" >
        <div class="wrapper" id="shopsearchlist" @scroll="getScroll($event)">
            <div class="header">
                <router-link :to="back" class="header_left icon_coo icon-a-ziyuan558"></router-link>
                <div class="header_title">{{title}}</div>
            </div>
            <div class="type">
                <ul>
                    <li :class="[check==1?'con':'']" @click="comprehensive">综合</li>
                    <li :class="[check==2?'con':'']" @click="salesvolume">销量</li>
                    <li :class="[check==3?'con':'']" @click="price">
                        <p>价格</p>
                        <div class="san">
                            <i :class="['icon_coo', 'icon-xiaosanjiaoup-copy', sort?'con':'']"></i>
                            <i :class="['icon_coo', 'icon-xiaosanjiaodown-copy',!sort?'con':'']"></i>
                        </div>
                    </li>
                    <li :class="[check==4?'con':'']" @click="newshop">新品</li>
                </ul>
            </div>

            <!-- 商品列表 -->
            <div class="shopList">

                <ul v-show="out">
                    <li v-for="item in shopList" :key="item.shopid" @click="goods(item.shopid)">
                        <div class="img">
                            <img :src="item.url" alt="">
                            <div class="freeship" v-if="item.free">包邮</div>
                        </div>
                        <p class="tip">{{item.tip}}</p>
                        <p class="title">{{item.title}}</p>
                        <div class="price">
                            <div class="newprice">￥{{item.newprice}}</div>
                            <div class="oldprice" v-if="item.oldprice!=''"><del>￥{{item.oldprice}}</del></div>
                        </div>
                    </li>
                    
                </ul>
                <div class="no" v-show="!out">还没有商品喔~</div>
            </div>

        </div>
    </div>
</template>

<style lang="scss" scoped>
.shopSearchList{
    .wrapper{
        height: 100vh;
        overflow: auto;
        // width: 100%;
        .header{
            position: fixed;
            left: 0;
            top: 0;
            background-color: #fff;
            z-index: 1;
            width: 100%;
            // padding: 0 12px;
            height: 50px;
            border-bottom: 1px solid rgb(248, 242, 230);
            display: flex;
            align-items: center;
            .header_left{
                font-size: 18px;
                padding-left: 16px;
            }
            .header_title{
                font-weight: 600;
                font-size: 18px;
                padding-left: 30px;
            }
            
        }
        .type{
            position: fixed;
            left: 0;
            top: 50px;
            background-color: #fff;
            z-index: 1;
            width: 100%;
            // padding: 0 12px;
            border-top: 1px solid rgb(247, 235, 187);
            border-bottom: 1px solid rgb(247, 235, 187);
            ul{
                display: flex;
                align-items: center;
                justify-content: space-between;
                li{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 25%;
                    color: #999;
                    padding: 15px 0;
                    // position: relative;
                    // p{

                    // }
                    .san{
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        i{
                            font-size: 10px;
                        }
                    }
                    // &::after(){
                    //     display: block;
                    //     content: " ";
                    //     width: 20px;
                    //     height:20px;
                    //     background-color: #feca3e;
                    //     position: absolute;
                    //     top: 20px;
                    //     left: 20px;
                    // }
                }
                li.con{
                    color: #feca3e;
                    // border-bottom: 2px solid #feca3e;
                    position: relative;
                    &::after{
                        display: block;
                        content: '';
                        width: 20px;
                        height:2px;
                        background-color: #feca3e;
                        position: absolute;
                        top: 50px;
                        left: 35px;
                    }
                    .san{
                        i{
                            color: #999;
                        }
                        i.con{
                            color: #feca3e;
                        }
                    }
                }
            }
        }
         .shopList{
            padding: 114px 16px 52px;
            margin-top: 4px;
             ul{
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                & > li{
                    width: calc(50% - 5.5px);
                    margin-bottom: 36px;
                    margin-right: 11px;
                    &:nth-child(2n){
                        margin-right: 0;
                    }
                    & > .img{
                        width: 100%;
                        position: relative;
                        img{
                            width: 100%;
                            border-top-left-radius: 8px;
                            border-top-right-radius: 8px;
                        }
                        .freeship{
                            position: absolute;
                            top: 8px;
                            left: 8px;
                            font-size: 10px;
                            transform: scale(0.9);
                            color: #333;
                            background-color: #feca3e;
                            padding: 3px 5px;
                            border-radius: 6px;
                        }
                    }
                    .tip{
                        padding: 0 8px;
                        height: 32px;
                        line-height: 32px;
                        background-color: #eeeeee;
                        border-bottom-left-radius: 8px;
                        border-bottom-right-radius: 8px;
                        font-size: 10px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    .title{
                        font-size: 11px;
                        padding: 7px 0px 0 0;
                        height: 33px;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                    }
                    .price{
                        display: flex;
                        align-items: flex-end;
                        padding: 4px 0;
                        .newprice{
                            font-size: 15px;
                            color: #f51505;
                            font-weight: 500;
                        }
                        .oldprice{
                            transform: scale(0.9);
                            font-size: 10px;
                            color: #aaa;
                        }
                    }
                }
            }
            .no{
                color: #999;
                text-align: center;
            }
        }
    }
}
</style>